【今日開發目標】

前兩天我們先把專案架構跟「蘇格拉底式 AI 助教」的 System Instruction 處理好，也做了一些基本的測試，接著今天就來處理比較有感的部分，幫 AI 助教做一個可以真的拿來用的介面。

這次使用 Google Stitch 來快速生成 Web UI Prototype，先把整個畫面做出來，再把產生的 HTML 存到本地，用瀏覽器實際跑跑看。

今天的目標很簡單：先不管後端，先把 AI 助教的介面做出來，至少讓它看起來像個真的學習平台。

【Google AI 工具實作過程】

1. 先用 Google Stitch 把介面生出來

因為這個專案主要是給學生使用，所以我不希望介面看起來太像一般工程師會用的後台系統。

如果畫面一打開就是一堆按鈕、表格跟冷冰冰的灰白色介面，我自己都不太想用，更不用說學生了。

我在 Stitch 裡面主要希望它長這樣：

• 使用較淡、較柔和的配色
• 整體介面簡單一點，不要塞太多東西
• 對話區要是整個畫面的主視覺
• 讓學生可以很直覺地知道「現在 AI 在說什麼、我可以做什麼」

我想把畫面分成三個主要區域：

左邊：學習歷程

可以看到之前聊過哪些主題、哪些地方答錯過，未來或續也可以拿來做學生的學習紀錄的延伸功能。

中間：AI 助教對話區

這裡就是主要跟 AI 對話的地方，把學生跟 AI 的訊息用不同的大頭貼跟氣泡區分開來。

下面：快捷功能

我另外放了三個按鈕：白話比喻、觀念拆解、觀念小測驗

這三個功能也是我之後想讓 AI 助教實際做到的東西。

2. 把 Stitch 產生的程式碼拿下來

介面大概確認之後，就直接把 Stitch 產生的 HTML / Tailwind CSS 匯出。

存成專案裡面的 index.html。

3. 直接開瀏覽器看看實際效果

接著直接把 index.html 丟到瀏覽器裡開。

主要測了兩件事情：

1. 桌機版排版有沒有跑掉
2. 縮小到手機尺寸時，聊天區跟按鈕會不會亂掉

實際測完後，目前效果還算不錯，聊天氣泡跟下面的快捷按鈕也都還算好操作。

當然現在這個還只是 Prototype，很多東西都還不能真的用，未來會再修改一下前端視覺部分。

例如按下「觀念小測驗」目前不會真的去產生題目，聊天訊息也還沒有接到 Gemini。但至少今天先把前端的基本樣子做出來了。

【這個 UI 為什麼要這樣設計？】

其實AI 助教不是「把 Gemini 接上去」就結束了，如果今天我只做一個輸入框，然後下面放：User：請問這題怎麼算？AI：答案是……

那其實跟一般 ChatGPT 沒有差多少。但如果今天學生根本不知道自己哪裡不懂，他甚至可能連 Prompt 都不知道要怎麼下。所以我才會想把「白話比喻」、「觀念拆解」、「觀念小測驗」這些東西做成按鈕。學生不用想：「我要怎麼問 AI 才能讓它講得簡單一點？」只要直接按下去就好了。

我覺得這才比較接近我一開始想做這個專案的原因，不是要求學生學會怎麼使用 AI，而是讓 AI 主動降低學生使用它的門檻。

【今天的一些想法】

原本在想這個 AI 助教的時候，我一直比較在意「AI 到底能不能回答問題」，但今天開始做 UI 後，反而發現另一件事情更重要的事就是：學生到底願不願意問。

很多時候學生不是完全沒有問題，而是他可能不知道自己哪裡不懂，也可能覺得「這個問題是不是太蠢了」。尤其在教室裡，如果旁邊同學都會，就更不一定敢問。

所以我覺得 AI 助教有一個很大的優勢，就是學生可以一直問，問得很爛也沒關係，就算問：「這到底是在算什麼？」也沒關係。甚至同一個東西問五次也沒關係。

這也是我覺得這個專案比較有意思的地方，UI 看起來可能只是一個介面，但如果設計得好，其實可以直接影響學生「敢不敢開始問」。

【明日預告】

今天先把 AI 助教的外觀跟基本互動雛型做出來。明天就要處理比較核心的部分：Structured Output。我會在 Google AI Studio 裡面設定 JSON Schema，讓 Gemini 不要每次都自由發揮，而是固定輸出我們需要的格式。這樣之後才有辦法把 AI 產生的題目直接丟進前端。